<template>
  <back-dialog-base
    :title="title"
    :visible="visibleAnalysis"
    width="410px"
    destroy-on-close
    @onCommit="handleSubmit"
    @close="clearForm"
  >
    <template #content>
      <div class="content-wrap">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="96px">
          <el-form-item label="操作结果：" prop="dealStatus">
            <el-radio-group v-model="form.dealStatus">
              <div
                v-if="props.rowData.equipmenmonitorForm.dealStatus !== '处置中'"
              >
                <el-radio label="1">真警</el-radio>
                <el-radio label="2">误报</el-radio>
              </div>
              <div v-else>
                <el-radio label="3">通过</el-radio>
                <el-radio label="2">误报</el-radio>
              </div>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="维保建议：">
            <el-input v-model="form.dealOpinion" type="textarea"></el-input>
          </el-form-item>
          <el-form-item
            label="接收人："
            prop="dealUser"
            v-if="form.dealStatus !== '2'"
          >
            <el-input v-model="form.dealUser"></el-input>
            <!-- <button @click="show">show</button> -->
          </el-form-item>
          <el-form-item
            label="处置图片："
            prop="fileLists"
            v-if="
              props.rowData.equipmenmonitorForm.dealStatus === '处置中' &&
              form.dealStatus !== '2'
            "
          >
            <el-upload
              v-model:file-list="fileLists"
              :action="url"
              ref="uploadFile"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-success="handleAvatarSuccess"
              :on-remove="handleRemove"
              :headers="{ token }"
              :limit="3"
              ><el-icon><Plus /></el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </back-dialog-base>
</template>

<script setup>
import { reactive, defineProps, ref, defineEmits, watch, unref } from 'vue'
import BackDialogBase from '@/components/BackDialogBase'
import { message } from '@/utils/message'
import { clearAlarm } from '@/api/monitor.js'
import store from '@/store'
const userId = ref('')
const token = store.getters.token
const dialogVisible = ref(false)
const dialogImageUrl = ref()
const uploadFile = ref(null)
const url = ref(process.env.VUE_APP_BASE_API + '/file/upload')
const fileLists = ref([])
const filesInfo = ref([])
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  visibleAnalysis: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  },
  userInfo: {
    type: Object,
    default: () => {}
  }
})

const emits = defineEmits(['onReload'])
const formRef = ref(null)
const form = reactive({
  alarmNo: '',
  dealOpinion: '', //维保建议
  dealStatus: '', //处理状态
  dealType: '', //处理类型
  dealUser: '' //处理人
  // id: '' //处理人id
})
// const fileList = reactive([
//   {
//     fileId: filesInfo.value.id,
//     fileName: filesInfo.value.fileName,
//     fileSize: filesInfo.value.fileSize,
//     fileUrl: filesInfo.value.fileUrl,
//     type: filesInfo.value.type
//   }
// ])
const fileList = reactive({
  fileId: '',
  fileName: '',
  fileSize: '',
  fileUrl: '',
  type: ''
})
const rules = reactive({
  dealStatus: [
    { required: true, message: '请选择分析结果', trigger: 'change' }
  ],
  dealUser: [
    {
      required: true,
      message: '请选择接收人',
      trigger: 'blur'
    }
  ]
})

// 文件相关
const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url
  dialogVisible.value = true
}
const handleAvatarSuccess = (file) => {
  filesInfo.value.push({
    // fileId: file.data.id,
    fileName: file.data.filename,
    fileSize: file.data.size,
    fileUrl: file.data.url,
    type: file.data.contextType
  })
}

const handleRemove = (file) => {
  // console.log(file)
  // arr.value = arr.value.filter((item) => item.fileId !== file.response.data.id)
  filesInfo.value = filesInfo.value.filter((item) => item.id !== file.id)
}

const handleSubmit = () => {
  console.log(userId.value)
  if (!formRef.value) return
  formRef.value.validate((valid) => {
    if (valid) {
      save(form)
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const save = async (data) => {
  // console.log(props.rowData)
  if (props.rowData.equipmenmonitorForm.dealStatus === '处置中') {
    const res = await clearAlarm({
      equipmendealForm: {
        dealOpinion: data.dealOpinion,
        dealStatus: 3,
        dealType: 2,
        dealUser: data.dealUser,
        alarmNo: props.rowData.equipmenmonitorForm.alarmNo
      },
      fileList: filesInfo.value
    }).then((res) => {
      message({ type: 'success', message: '保存成功!' })
      clearForm()
      emits('onReload')
    })
  } else {
    const res = await clearAlarm({
      equipmendealForm: {
        dealOpinion: data.dealOpinion,
        dealStatus: data.dealStatus,
        dealType: data.dealType,
        dealUser: data.dealUser,
        id: '',
        alarmNo: props.rowData.equipmenmonitorForm.alarmNo
      }
    }).then((res) => {
      message({ type: 'success', message: '保存成功!' })
      clearForm()
      emits('onReload')
    })
  }
}

const clear = () => {
  const form = unref(formRef)
  form.resetFields()
  // clearformInline()
}
// const clearformInline = () => {}

const clearForm = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
  form.dealOpinion = ''
  form.dealStatus = ''
  form.dealType = ''
  form.dealUser = ''
}
const clearItem = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
  emits('isShow')
  form.dealOpinion = ''
  form.dealStatus = ''
  form.dealType = ''
  form.dealUser = ''
  fileList.value = []
}
watch(
  () => props.rowData,
  () => {
    form.alarmNo = props.rowData.equipmenmonitorForm.alarmNo
    form.dealType = '1'
  }
)

watch(
  () => form.dealStatus,
  () => {
    form.dealOpinion = ''
    form.dealUser = ''
  }
)
</script>

<style lang="scss" scoped>
.font {
  font-size: 16px;
  font-family: Source Han Sans CN;
  color: #333333;
}
:deep(.el-date-editor.el-input, .el-date-editor.el-input__inner) {
  width: 100%;
}
.content-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  font-size: 13px;
  .right-form {
    span {
      width: 26px;
      height: 15px;
    }
  }
}
:deep(.el-upload--picture-card) {
  width: 80px;
  height: 80px;
}

:deep(.el-input--suffix) {
  width: 209px;
}
</style>
